<template>

  <a-popover
    placement="right"
    trigger="hover"
    :visible="hovered"
    @visibleChange="handleHoverChange"
  >
    <template #content>
      <div>
        <ItemCardHover 
          :url="url" 
          :name="name" 
          :lore="lore"
          :attrib="attrib"
          :desc="desc"
          :notes="notes"
          :mc="mc"
          :cd="cd"
          :requirements="requirements"
         />
      </div>
    </template>
    <a-popover
      placement="right"
      trigger="click"
      :visible="clicked"
      @visibleChange="handleClickChange"
    >
      <template #content>
        <div>
          <ItemCardHover 
            :url="url" 
            :name="name" 
            :lore="lore"
            :attrib="attrib"
            :desc="desc"
            :notes="notes"
            :mc="mc"
            :cd="cd"
            :requirements="requirements"
          />
          <a @click="hide">Close</a>
        </div>
      </template>

        <a-card hoverable style="width: 240px" @mouseenter="onEnter" @mouseleave="onLeave">
          <img 
            slot="cover"
            referrerPolicy='no-referrer'
            width="50"
            :src="url"
          />
          <a-card-meta :title="name" />
          <span v-if="cost">价格:{{cost}}</span>
        </a-card>

    </a-popover>
  </a-popover>
</template>
<script lang="ts">
import { computed, defineComponent, inject, ref, watch } from "vue";
import { useStore } from "vuex";
import ItemCardHover from "./ItemCardHover.vue";
import itemList from '../assets/itemlist.json'
export default defineComponent({
    props: {
        url: String,
        name: String,
        detail: Object
    },

    setup(props, { emit }) {
        const info = ref();
        watch(props, (val, old) => {
            info.value = props.detail;
        });
        const cost = computed(() => {
            if (props.detail) {
                return props.detail["cost"];
            }
            else {
                return "";
            }
        });
        const lore = computed(() => {
            if (props.detail) {
                return props.detail["lore"];
            }
            else {
                return "";
            }
        });
        const attrib = computed(() => {
            if (props.detail) {
                return props.detail["attrib"];
            }
            else {
                return "";
            }
        });
        const desc = computed(() => {
            if (props.detail) {
                return props.detail["desc"];
            }
            else {
                return "";
            }
        });
        const notes = computed(() => {
            if (props.detail) {
                return props.detail["notes"];
            }
            else {
                return "";
            }
        });
        const mc = computed(() => {
            if (props.detail) {
                return props.detail["mc"];
            }
            else {
                return "";
            }
        });
        const cd = computed(() => {
            if (props.detail) {
                return props.detail["cd"];
            }
            else {
                return "";
            }
        });
        const req = computed(()=>{
          return (key:any) => {
            return itemList[key as keyof typeof itemList]['dname']
          }
        })
        const requirements = computed(() => {
            if (props.detail) {
              const list = props.detail["requirements"]
              if (list === undefined) return ''
              
              let res: any[] = []
              const y=itemList
              list.forEach((item:any) => {
                const key = item.replace('*','')
                
                res.push(req.value(key))
              });
                return res.toString()
            }
            else {
                return "";
            }
        });
        const onEnter = (e: Event): void => {
            console.log("enter");
        };
        const onLeave = (e: Event): void => {
            console.log("leave");
        };
        const clicked = ref<boolean>(false);
        const hovered = ref<boolean>(false);
        const hide = () => {
            clicked.value = false;
            hovered.value = false;
        };
        const handleHoverChange = (visible: boolean) => {
            clicked.value = false;
            hovered.value = visible;
        };
        const handleClickChange = (visible: boolean) => {
            clicked.value = visible;
            hovered.value = false;
        };
        return {
            itemList,
            info,
            cost,
            lore,
            attrib,
            desc,
            notes,
            mc,
            cd,
            requirements,
            onEnter,
            onLeave,
            clicked,
            hovered,
            hide,
            handleHoverChange,
            handleClickChange,
        };
    },
    components: { ItemCardHover }
})
</script>


<style lang="less" scoped>

</style>